<script src="http://code.google.com/apis/gears/gears_init.js" type="text/javascript" charset="utf-8"></script>
<script src="http://www.merkwelt.com/people/stan/geo_js/js/geo.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>


<script type="text/javascript">
      var map;
      function initialize() {
        var myOptions = {
          zoom: 14,
          //center: new google.maps.LatLng(-34.397, 150.644),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map_canvas'),
            myOptions);
      }

      var geocoder = new google.maps.Geocoder()
    function codeAddress()
    {
        var address = document.getElementById("address").value;
        var name = document.getElementById("name").value;
        var icon = "http://ww2.unime.it/orientamento_tutorato/Immagini/Farmacia/2%20farmacia.gif";
        geocoder.geocode( { 'address': address}, function(results, status) {
           // if (status == google.maps.GeocoderStatus.OK) {
                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location,
                    title: address,
                    icon: icon,
                    animation: google.maps.Animation.DROP
                });
                var lat = results[0].geometry.location.lat().toFixed(3);
                var lng = results[0].geometry.location.lng().toFixed(3);
                var infowindow = new google.maps.InfoWindow({
	                content: "<table>"+
                                "<tr>"+
                                    "<td>"+
    		                            "<img src=\"http://www.trabiaplanet.it/img/tpl/icons/nu_farmacia.png\">"+
                                    "</td>"+
                                    "<td>"+name+"<br><font size='1px'>("+lat+", "+lng+")</font></td>"+
                                "</tr>"+
                              "</table>"
	            });
                map.setCenter(results[0].geometry.location);
                google.maps.event.addListener(marker, 'click', function() {
	                infowindow.open(map,marker);
	            });
           // }
        });
    }

</script>


<body onload="initialize(); codeAddress()">
<div data-role="header">
  <a href="../posts/lista" rel="external" data-icon="arrow-l">Back</a>
  <h1>Mostra Farmacia</h1>
  <%= link_to 'Edit', edit_post_path(@post), "data-icon" => "gear", "class" => "ui-btn-right" %>
</div>

<div data-role="content" style="height: auto;">
  <%= form_for(@post) do |f| %>

  <div class="field">
    <%= f.label :title %>
    <%= f.text_field :title %>
  </div>
      <br />
  <div class="field">
    <%= f.label :body %>
    <%= f.text_area :body %>
  </div>

      <br />

  <div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
    <div id="map_canvas" style="height: 400px"></div>
  </div>

  <% end %>

  <!-- RICAVARE GLI INDIRIZZI DAL DB E TRASMETTERLI ALLA FUNZIONE CHE FA LO SPLIT !-->
    <div id="nome" style="visibility: hidden"><input id="name" value="<%= @post.title%>"></div>
    <div id="via" style="visibility: hidden;"><input id="address" value="<%= @post.body%>"></div>

</div>

<div data-role="footer" data-position="fixed">
  <%= link_to 'Destroy', @post, :confirm => 'Are you sure?', :method => :delete, "data-icon" => "delete", "class" => "ui-btn-left" %>
</div>
</body>